<template>
  <div>
    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <div>
      <el-tooltip placement="top" content="回到顶部">
        <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="0" transition-name="fade"/>
      </el-tooltip>
    </div>
    <div class="question-table">
      <QuestionTable msg="question~~~~"></QuestionTable>
    </div>
    <el-row>
      <el-col :span="10" :offset="19">
        <el-button type="primary" @click="complete">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import QuestionTable from "@/components/QuestionTable.vue";
import qs from 'qs'
import BackToTop from "@/components/BackToTop";


export default {
  components: {
    QuestionTable,BackToTop
  },
  name: "SelectWord",
  data() {
    return {
      input: '',
      tableData: [{
        content: '单词',
        rank: 0,
        definition: '释义',
        correctRank: 0
      }
      ],
      multipleSelection: [],
      question:[
        {
          "content": "house",
          "pk": 3208,
          "definition_choices": [
            {
              "pk": 4593,
              "rank": 22,
              "definition": " n. 民族,人,人们,人民,家人"
            },
            {
              "pk": 3208,
              "rank": 155,
              "definition": " n. 房子,住宅,全家人,议院"
            },
            {
              "pk": 4775,
              "rank": 188,
              "definition": " n. (国家)总统,(公司)总裁,总经理,社长(日本)"
            },
            {
              "pk": 1219,
              "rank": 70,
              "definition": " adv. 在中间"
            }
          ],
          //正确的答案
          "rank": 155
        },
        {
          "content": "reason",
          "pk": 4989,
          "definition_choices": [
            {
              "pk": 1680,
              "rank": 264,
              "definition": " n. 学院, 学校，社团，枢机主教团"
            },
            {
              "pk": 1997,
              "rank": 298,
              "definition": " vt. &vi. 决定,作出抉择"
            },
            {
              "pk": 4989,
              "rank": 228,
              "definition": " n. 理由,原因,理智,理性"
            },
            {
              "pk": 3618,
              "rank": 149,
              "definition": " adj. 仁慈的,友好的"
            }
          ],
          "rank": 228
        },
        {
          "content": "baby",
          "pk": 286,
          "definition_choices": [
            {
              "pk": 3790,
              "rank": 420,
              "definition": " v. 听，倾听"
            },
            {
              "pk": 3995,
              "rank": 1267,
              "definition": " n. 膳食,一餐,谷物粗粉"
            },
            {
              "pk": 286,
              "rank": 403,
              "definition": " adj. (形容用法)婴儿的, 过小的"
            },
            {
              "pk": 4332,
              "rank": 472,
              "definition": " n. 官员,军官"
            }
          ],
          "rank": 403
        },
        {
          "content": "track",
          "pk": 6204,
          "definition_choices": [
            {
              "pk": 14154,
              "rank": 1419,
              "definition": " n. 插入,介入,调停"
            },
            {
              "pk": 6204,
              "rank": 837,
              "definition": " n. 小路, 跑道, 轨道, 踪迹; 惯例, 常规"
            },
            {
              "pk": 1301,
              "rank": 1340,
              "definition": " n. 分支,树枝"
            },
            {
              "pk": 2194,
              "rank": 1407,
              "definition": " n. 怀疑,疑惑,不信任"
            }
          ],
          "rank": 837
        },
        {
          "content": "location",
          "pk": 3816,
          "definition_choices": [
            {
              "pk": 10869,
              "rank": 1654,
              "definition": " n. 谈判, 协商"
            },
            {
              "pk": 3816,
              "rank": 1058,
              "definition": " n. 地点,位置"
            },
            {
              "pk": 44,
              "rank": 1921,
              "definition": " adj. 非凡的,特别的,特派的"
            },
            {
              "pk": 1288,
              "rank": 1603,
              "definition": " vt. 烦扰"
            }
          ],
          "rank": 1058
        },
        {
          "content": "extra",
          "pk": 2505,
          "definition_choices": [
            {
              "pk": 6592,
              "rank": 1977,
              "definition": " n. 擦拭,用力打"
            },
            {
              "pk": 1648,
              "rank": 1928,
              "definition": " n. 时钟, 计时器"
            },
            {
              "pk": 2505,
              "rank": 1142,
              "definition": " adj. 额外的"
            },
            {
              "pk": 13560,
              "rank": 1984,
              "definition": " adj. 基因的, 遗传的, 起源的"
            }
          ],
          "rank": 1142
        }
      ],
      //记录选对的答案
      right_ranks: [2059,5500,7907],
      //全部的正确rank
      word_ranks:[],
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        borderRadius: '4px',
        lineHeight: '45px', // 请保持与高度一致以垂直居中
        background: '#b4e2ea'// 按钮的背景颜色
      }
    }
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // initAllRanks(list){
    //   this.$store.commit('setAllQuestions',list)
    //   for (var ele of list) {
    //     this.$store.getters.getAllRanks.push(ele.rank)
    //   }
      // console.log('AllRanks:' + this.$store.getters.getAllRanks)
      // console.log('AllQ:' + this.$store.getters.getAllQuestions)
    // },
    complete(){
      console.log('completing...')
      let data = {
        'category': this.$store.getters.getTestLevel,
        'phase': '',
        'right_ranks': this.$store.getters.getCorrectRanks.toString(),
        'word_ranks': this.$store.getters.getAllRanks.toString()
      }
      console.log('rightRanks: ' + this.$store.getters.getCorrectRanks)
      console.log('word_ranks: ' + this.$store.getters.getAllRanks)
      this.$axios.post('/vocabularies/', qs.stringify(data), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        }
      }).then(res => {
        console.log(res)
        // alert(res.data.data.vocab)
        this.$store.commit('setResult',res.data.data.vocab)
        this.$router.push('/result')
      }).catch(err => {
        console.log(err)
      })

      // fetch("https://www.shanbay.com/api/v1/vocabtest/vocabularies/", {
      //   "headers": {
      //     "accept": "*/*",
      //     "accept-language": "zh-CN,zh;q=0.9",
      //     "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
      //     "sec-ch-ua": "\"Google Chrome\";v=\"89\", \"Chromium\";v=\"89\", \";Not A Brand\";v=\"99\"",
      //     "sec-ch-ua-mobile": "?0",
      //     "sec-fetch-dest": "empty",
      //     "sec-fetch-mode": "cors",
      //     "sec-fetch-site": "same-origin",
      //     "x-requested-with": "XMLHttpRequest",
      //     "cookie": "csrftoken=1ffebf7e042cb11379aad9613b3401e5; sensorsdata2015jssdkcross=%7B%22distinct_id%22%3A%221786d35a5fe44-054c2c86f586eb-5771031-1072890-1786d35a5ff326%22%2C%22first_id%22%3A%22%22%2C%22props%22%3A%7B%22%24latest_traffic_source_type%22%3A%22%E7%9B%B4%E6%8E%A5%E6%B5%81%E9%87%8F%22%2C%22%24latest_search_keyword%22%3A%22%E6%9C%AA%E5%8F%96%E5%88%B0%E5%80%BC_%E7%9B%B4%E6%8E%A5%E6%89%93%E5%BC%80%22%2C%22%24latest_referrer%22%3A%22%22%7D%2C%22%24device_id%22%3A%221786d35a5fe44-054c2c86f586eb-5771031-1072890-1786d35a5ff326%22%7D; _ga=GA1.2.578252055.1616739936; __utmz=183787513.1616740461.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utma=183787513.578252055.1616739936.1618151883.1618226230.10; __utmc=183787513; __utmb=183787513.2.10.1618226230"
      //   },
      //   "referrer": "https://www.shanbay.com/vocabtest/",
      //   "referrerPolicy": "strict-origin-when-cross-origin",
      //   "body": "category=NCEE&phase=&right_ranks=&word_ranks=32%2C109%2C175%2C190%2C299%2C342%2C414%2C477%2C572%2C605%2C666%2C783%2C834%2C903%2C978%2C1037%2C1110%2C1155%2C1253%2C1377%2C1406%2C1494%2C1608%2C1711%2C1819%2C1855%2C1991%2C2152%2C2273%2C2330%2C2413%2C2669%2C2743%2C2887%2C2973%2C3272%2C3461%2C3604%2C3728%2C4027%2C4328%2C4463%2C4888%2C5258%2C5488%2C6384%2C7847%2C8020%2C9800%2C13898",
      //   "method": "POST",
      //   "mode": "cors"
      // });
    },
    getQSelection(val){
      this.word_ranks = val
    }
  },
  created() {
    console.log('selectWord')
    this.question = this.$store.getters.getAllQuestions
    // this.$axios.get('/vocabularies/?category=' + this.$store.getters.getTestLevel)
    //     .then(res => {
    //       console.log(res.data.data)
    //       this.question = res.data.data
    //       this.initAllRanks(res.data.data)
    //     }).catch(err => {
    //   console.log(err)
    // })
  }
}
</script>

<style scoped>

</style>
